<template>
	<view class="add-ticket-container">
		<view class="form-group">
			<text class="label">
				<text class="placeholder-icon"></text>
				工单标题
			</text>
			<input class="input" placeholder="请输入工单标题" v-model="formData.title" />
		</view>
		
		<view class="form-group">
			<text class="label">
				<text class="placeholder-icon"></text>
				地址
			</text>
			<input class="input" placeholder="请输入地址" v-model="formData.address" />
		</view>
		
		<view class="form-group">
			<text class="label">
				<text class="placeholder-icon"></text>
				优先级
			</text>
			<view class="priority-selector">
				<view class="priority-item" 
					:class="{active: formData.priority === 'low'}" 
					@click="selectPriority('low')">
					<text class="placeholder-icon"></text>
					低优先级
				</view>
				<view class="priority-item" 
					:class="{active: formData.priority === 'medium'}" 
					@click="selectPriority('medium')">
					<text class="placeholder-icon"></text>
					中优先级
				</view>
				<view class="priority-item" 
					:class="{active: formData.priority === 'high'}" 
					@click="selectPriority('high')">
					<text class="placeholder-icon"></text>
					高优先级
				</view>
			</view>
		</view>
		
		<view class="form-group">
			<text class="label">
				<text class="placeholder-icon"></text>
				问题描述
			</text>
			<textarea class="textarea" placeholder="请详细描述您遇到的问题" v-model="formData.description" />
		</view>
		
		<view class="form-group">
			<text class="label">
				<text class="placeholder-icon"></text>
				附件上传
			</text>
			<view class="upload-area" @click="uploadAttachment">
				<text class="placeholder-icon"></text>
				<text class="upload-text">点击上传图片</text>
			</view>
			<view class="attachment-preview" v-if="attachmentUrl">
				<image :src="attachmentUrl" class="attachment-image" mode="aspectFill"></image>
				<text class="remove-attachment" @click="removeAttachment">
					<text class="placeholder-icon"></text>
					删除
				</text>
			</view>
		</view>
		
		<view class="form-actions">
			<button class="submit-btn" @click="submitTicket">
				<text class="placeholder-icon"></text>
				提交工单
			</button>
			<button class="cancel-btn" @click="cancel">
				<text class="placeholder-icon"></text>
				取消
			</button>
		</view>
	</view>
</template>

<script>
	import request from '../../../utils/request.js';
	
	export default {
		data() {
			return {
				formData: {
					title: '',
					address: '',
					description: '',
					priority: 'medium'
				},
				attachmentUrl: ''
			}
		},
		methods: {
			selectPriority(priority) {
				this.formData.priority = priority;
			},
			uploadAttachment() {
				// 模拟上传附件
				console.log('上传附件');
				
				// 在实际应用中，这里会调用上传接口
				// uni.chooseImage 进行图片选择
				uni.chooseImage({
					count: 1,
					success: (res) => {
						console.log('选择图片成功', res);
						// 模拟上传结果
						this.attachmentUrl = res.tempFilePaths[0];
						uni.showToast({
							title: '图片选择成功',
							icon: 'success'
						});
					},
					fail: (err) => {
						console.log('选择图片失败', err);
						uni.showToast({
							title: '选择图片失败',
							icon: 'none'
						});
					}
				});
			},
			removeAttachment() {
				this.attachmentUrl = '';
				uni.showToast({
					title: '已删除附件',
					icon: 'none'
				});
			},
			submitTicket() {
				if (!this.formData.title) {
					uni.showToast({
						title: '请输入工单标题',
						icon: 'none'
					});
					return;
				}
				
				if (!this.formData.description) {
					uni.showToast({
						title: '请输入问题描述',
						icon: 'none'
					});
					return;
				}
				
				// 提交工单
				request({
					url: '/api/tickets',
					method: 'POST',
					data: this.formData
				}).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '提交成功',
							icon: 'success'
						});
						
						// 返回工单列表
						setTimeout(() => {
							uni.navigateBack();
						}, 1000);
					} else {
						uni.showToast({
							title: res.message || '提交失败',
							icon: 'none'
						});
					}
				}).catch(err => {
					console.error('提交工单失败', err);
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					});
				});
			},
			cancel() {
				uni.navigateBack();
			}
		}
	}
</script>

<style scoped>
	.add-ticket-container {
		padding: 20rpx;
	}
	
	.form-group {
		background-color: white;
		padding: 30rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}
	
	.label {
		display: block;
		font-size: 32rpx;
		margin-bottom: 20rpx;
		font-weight: bold;
	}
	
	.input, .textarea {
		width: 100%;
		padding: 20rpx;
		border: 1rpx solid #eee;
		border-radius: 10rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}
	
	.textarea {
		height: 200rpx;
	}
	
	.priority-selector {
		display: flex;
		justify-content: space-between;
	}
	
	.priority-item {
		flex: 1;
		text-align: center;
		padding: 20rpx 0;
		border: 1rpx solid #eee;
		border-radius: 10rpx;
		margin: 0 10rpx;
		font-size: 28rpx;
	}
	
	.priority-item:first-child {
		margin-left: 0;
	}
	
	.priority-item:last-child {
		margin-right: 0;
	}
	
	.priority-item.active.low {
		background-color: #e3f2fd;
		border-color: #1e88e5;
		color: #1e88e5;
	}
	
	.priority-item.active.medium {
		background-color: #fff8e1;
		border-color: #ff8f00;
		color: #ff8f00;
	}
	
	.priority-item.active.high {
		background-color: #ffebee;
		border-color: #c62828;
		color: #c62828;
	}
	
	.upload-area {
		border: 1rpx dashed #ddd;
		border-radius: 10rpx;
		padding: 40rpx 0;
		text-align: center;
	}
	
	.upload-text {
		color: #999;
	}
	
	.attachment-preview {
		margin-top: 20rpx;
		position: relative;
	}
	
	.attachment-image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
	}
	
	.remove-attachment {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		background-color: rgba(0, 0, 0, 0.5);
		color: white;
		padding: 5rpx 15rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
	}
	
	.form-actions {
		display: flex;
		justify-content: space-between;
		margin-top: 50rpx;
	}
	
	.submit-btn, .cancel-btn {
		flex: 1;
		padding: 20rpx 0;
		border-radius: 10rpx;
		font-size: 32rpx;
		margin: 0 10rpx;
	}
	
	.submit-btn {
		background-color: #007AFF;
		color: white;
		border: none;
	}
	
	.cancel-btn {
		background-color: white;
		color: #666;
		border: 1rpx solid #ddd;
	}
	
	.form-icon {
		font-size: 32rpx;
		margin-right: 10rpx;
		color: #007AFF;
	}
	
	.priority-icon {
		font-size: 32rpx;
		margin-right: 10rpx;
	}
	
	.upload-icon {
		font-size: 48rpx;
		color: #007AFF;
		margin-bottom: 10rpx;
	}
	
	.delete-icon {
		font-size: 24rpx;
		margin-right: 5rpx;
	}
</style>